<template>
    <div>
               
        <div class="crumbs">
                       
            <el-breadcrumb separator="/">
                                <h3 style="color #DDDDDD">当前位置:教师可点选监考时间段</h3>
                           
            </el-breadcrumb>
                   
        </div>
<el-button
        class="filter-item"
        size="mini"
        type="primary"
        icon="el-icon-upload"
        @click="dialogVisible = true"
      >批量导入</el-button>
        <el-dialog :title="titles" v-model="dialogFormVisible">
            <el-form :model="form" :rules="addFormRules" ref="addFormRef">
                <el-form-item label="考试时间" label-width="100px">
                    <el-date-picker
                          v-model="form.kstime"
                          type="date"
                          placeholder="选择日期">
                        </el-date-picker>
                </el-form-item>
            </el-form>
            <el-form :model="form">
                <el-form-item label="主监考教师" label-width="100px">
                    <el-input v-model="form.mainteacher"/>
                </el-form-item>
            </el-form>
            <el-form :model="form">
                <el-form-item label="副监考教师" label-width="100px">
                    <el-input v-model="form.viceteacher"/>
                </el-form-item>
            </el-form>
            <el-form :model="form">
                <el-form-item label="巡考教师" label-width="100px">
                    <el-input v-model="form.xunkaoteacher"/>
                </el-form-item>
            </el-form>
            <el-form :model="form">
                <el-form-item label="是否免监考" label-width="100px">
                    <el-input v-model="form.iscancelinvigilate"/>
                </el-form-item>
            </el-form>
            <el-form :model="form">
                <el-form-item label="最多监考次数" label-width="100px">
                    <el-input v-model="form.maxinvigilatetimes"/>
                </el-form-item>
            </el-form>
            <div class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitCheck">确 定</el-button>
            </div>

        </el-dialog>
        <el-table
                :data="tableData"
                style="width: 100%">
            <el-table-column
                    prop="kstime"
                    label="考试时间"
                    width="250"
					:formatter="dateFormat">
            </el-table-column>
            <el-table-column
                    prop="mainteacher"
                    label="主监考教师"
                    width="250">
            </el-table-column>
            <el-table-column
                    prop="viceteacher"
                    label="副监考教师"
                    width="250">
            </el-table-column>
            <el-table-column
                    prop="xunkaoteacher"
                    label="巡考教师"
                    width="250">
            </el-table-column>
            <el-table-column
                    prop="iscancelinvigilate"
                    label="是否免监考"
                    width="250">
            </el-table-column>
            <el-table-column
                    prop="maxinvigilatetimes"
                    label="最多监考次数"
                    width="250"
            >
            </el-table-column>
<!-- 			<el-table-column
			  prop="beizhu"
			  label="备注"
			  width="250"
			  >
			</el-table-column> -->
            <el-table-column
                    prop="operation"
                    label="操作"
                    width="250">
                <template #default="scope">

                    <el-button type="primary" @click="updateId(scope.row)">编辑</el-button>
                    <el-button type="danger" @click="deleteID(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                background
                @current-change="page"
                current-page.sync="5"
                :page-size="currentPage.limit"
                layout="total, prev, pager, next"
                :total="currentPage.current">
        </el-pagination>
         <el-dialog title="批量导入" v-model="dialogVisible">
            <el-form-item >
            选择Excel:
                 <upload-excel-component  :on-success="handleSuccess" :before-upload="beforeUpload" />
            </el-form-item>
        </el-dialog>

    </div>
</template>
<script>
    import {addgouji3, teacherTableList,deletegoujiID3} from '../api/index.js'
import UploadExcelComponent from '../components/UploadExcel/index.vue'
    export default {
         components: { UploadExcelComponent },
        created() {
            this.getdata(1);
        },
        methods: {

              //上传之前  你可以获得文件做一些个性化设置
    beforeUpload(file) {
        console.log(file)
      const isLt1M = file.size / 1024 / 1024 < 1
      if (isLt1M) {
        return true
      }
      this.$message({
        message: 'Please do not upload files larger than 1m in size.',
        type: 'warning'
      })
      return false
    },   
    //成功
     handleSuccess({ results, header }) {
		 
		var a=[];
		var w = {};
		for(var i=0;i<results.length;i++){
				 var x = JSON.parse(JSON.stringify(results[i]).replace(/考试时间/g,"kstime"));
				 var y = JSON.parse(JSON.stringify(x).replace(/主监考教师/g,"mainteacher"));
				 var z = JSON.parse(JSON.stringify(y).replace(/副监考教师/g,"viceteacher"));
				 var q = JSON.parse(JSON.stringify(z).replace(/巡考教师/g,"xunkaoteacher"));
				 var e = JSON.parse(JSON.stringify(q).replace(/是否免监考/g,"iscancelinvigilate"));
				 w = JSON.parse(JSON.stringify(e).replace(/最多监考次数/g,"maxinvigilatetimes"));
				 
				 addgouji3(w).then(Object => {
					 this.getdata(this.currentPage.page);
					 this.dialogFormVisible = false;
					 this.dialogVisible = false;
				 })
		}
		this.$message({
		  message: '导入成功!',
		  type: 'success'
		});
		this.getdata(1);
		
    },
            open() {
                console.log(this.dialogFormVisible)
                this.dialogFormVisible = true;
                this.form.pkId = 0;
                this.titles = '添加'
            },
            add() {
            },
            deleteID(row) {
				this.$confirm('确认删除?', '提示', {
				  confirmButtonText: '确定',
				  cancelButtonText: '取消',
				  type: 'warning'
				}).then(() => {
					deletegoujiID3(row).then(Object => {
					
						this.getdata(this.currentPage.page);
					
					})
				  this.$message({
					type: 'success',
					message: '删除成功!'
				  });
				}).catch(() => {
				  this.$message({
					type: 'info',
					message: '已取消删除'
				  });          
				});
              
            },
            updateId(row) {
                this.form = row;
                this.dialogFormVisible = true;
                this.titles = '编辑';

            },

            submitCheck() {
                this.$refs.addFormRef.validate(valid => {
                    addgouji3(this.form).then(Object => {
                        this.getdata(this.currentPage.page);
                        this.dialogFormVisible = false;

                    })
                })

            },


            getdata(obj) {
                this.currentPage.page = obj
                teacherTableList(this.currentPage).then(Object => {
                    this.tableData = Object.records[0];
                    this.currentPage.current = Object.rowCount;

                })
            },
            handleClick(row) {
                console.log(row);
            },
            page(currentPage) {
                this.getdata(currentPage);
            },
			dateFormat(row, column) {
			  var date = row[column.property];
			  if (date == undefined) {
				return "";
			  }
			  return this.format1(date,'yyyy-MM-dd');
			},
			format1(time, format) {
				var t = new Date(time);
				var tf = function (i) { return (i < 10 ? '0' : '') + i };
				return format.replace(/yyyy|MM|dd|HH|mm|ss/g, function (a) {
					switch (a) {
						case 'yyyy':
							return tf(t.getFullYear());
							break;
						case 'MM':
							return tf(t.getMonth() + 1);
							break;
						case 'mm':
							return tf(t.getMinutes());
							break;
						case 'dd':
							return tf(t.getDate());
							break;
						case 'HH':
							return tf(t.getHours());
							break;
						case 'ss':
							return tf(t.getSeconds());
							break;
					}
				})
			}
        },
        data() {
            return {
                total: null,
                titles: '',
                dialogVisible:false,
                tableData: null,
                dialogFormVisible: false,
                currentPage: {
                    page: 1,
                    total: 20,
                    count: 50,
                    current: 0,
                    limit: 10
                },
				aaa:'',
                form: {
                    pkId:0,

                    teacherid: '',
                    mainteacher: '',
                    viceteacher: '',
                    xunkaoteacher: '',
                    iscancelinvigilate: '',
                    maxinvigilatetimes: '',
					kstime:''
                }
            }
        }
    }
</script>
